<template>
  <el-dialog
    v-model="dialogTableVisible"
    title="入职填写情况统计"
    custom-class="view"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <common-table
      style="flex: 1"
      :table-data="gridData"
      :pagination="pagination"
      :columns="columns"
    >
      <template #url="{ row }">
        <el-link style="color: #3070f9" @click="copyLink(row)">复制连接</el-link>
      </template>
      <template #urlState="{ row }">
        <span :style="{ color: transformColor(row.urlState) }">
          {{ transformState(row.urlState) }}
        </span>
      </template>
      <template #operate="{ row }">
        <el-link style="color: #3070f9" @click="operateRow(row)">
          {{ row.urlState != '2' ? '失效该链接' : '查看表单' }}
        </el-link>
      </template>
    </common-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogTableVisible = false">确定</el-button>
      </span>
    </template>
  </el-dialog>
  <view-detail
    @joinOffer="joinOffer"
    @reject="rejectOffer"
    :curRow="curRow"
    v-if="detailShow"
    v-model:detail-show="detailShow"
  ></view-detail>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from 'vue';
import { _msgBox } from '@/utils/msg';
import CommonTable from '@/components/CommonTable.vue';
import { columns } from './mockData';
import { getOfferPageListReq, loseLinkReq } from '@/api/staffManage';
import ViewDetail from '@/views/staffManage/components/ViewDetail.vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const emit = defineEmits(['update:staffDetailShow', 'updatePageList']);

const props = defineProps({
  staffDetailShow: {
    type: Boolean,
    default: false,
  },
});

const detailShow = ref(false);
const dialogTableVisible = computed({
  get() {
    return props.staffDetailShow;
  },
  set(v) {
    emit('update:staffDetailShow', v);
  },
});
// 分页
const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});

const curRow = ref({});

const operateRow = async (row) => {
  curRow.value = row;
  if (row.urlState == '2') {
    detailShow.value = true;
    console.log('已提交');
  } else {
    ElMessageBox.confirm('确定要失效该链接?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      const res = await loseLinkReq({
        id: row.id,
      });
      if (res && res.code == 200) {
        ElMessage({
          type: 'success',
          message: '失效成功',
        });
        pagination.value.pageNum = 1;
        getPageList();
      }
    });
  }
};

const copyLink = (row) => {
  copyToClipboard(row.url).then((res) => {
    _msgBox('已复制连接！', 'success');
  });
};

function copyToClipboard(textToCopy: string) {
  // navigator clipboard 需要https等安全上下文
  if (navigator.clipboard && window.isSecureContext) {
    // navigator clipboard 向剪贴板写文本
    return navigator.clipboard.writeText(textToCopy);
  } else {
    // 创建text area
    let textArea = document.createElement('textarea');
    textArea.value = textToCopy;
    // 使text area不在viewport，同时设置不可见
    textArea.style.position = 'absolute';
    textArea.style.opacity = '0';
    textArea.style.left = '-999999px';
    textArea.style.top = '-999999px';
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    return new Promise((res, rej) => {
      // 执行复制命令并移除文本框
      document.execCommand('copy') ? res(null) : rej();
      textArea.remove();
    });
  }
}

const transformState = (val) => {
  const valArr = ['链接未打开', '填写中', '已提交', '已失效'];
  return valArr[Number(val)];
};

const transformColor = (val) => {
  const colorArr = ['#e6a23c', '#409eff', '#67c23a', '#f56c6c'];
  return colorArr[Number(val)];
};

const gridData = ref([]);

const getPageList = async () => {
  let par = {
    currentPage: pagination.value.pageNum,
    pageSize: pagination.value.pageSize,
  };
  const res = await getOfferPageListReq(par);
  if (res && res.code == 200) {
    gridData.value = res.data.list;
    pagination.value.total = res.data.page.totalEntries * 1;
  }
};

// 关闭的回调
const handleClose = () => {
  emit('updatePageList');
  dialogTableVisible.value = false;
};

const rejectOffer = (val) => {
  // TODO 拒绝入职 回调接口
  getPageList();
};

const joinOffer = (val) => {
  // TODO 入职 回调接口
  getPageList();
};

const setSize = (val) => {
  pagination.value.pageNum = 1;
  pagination.value.pageSize = val;
  getPageList();
};
const setPage = (val) => {
  pagination.value.pageNum = val;
  getPageList();
};
getPageList();
defineExpose({
  setSize,
  setPage,
});
</script>
<style lang="less">
.view {
  color: #3070f9 !important;
  height: 800px !important;
  display: flex;
  flex-direction: column;

  .el-dialog__body {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
